<template>
	<view class="pd30 bdr16 box-shadow bg-w">
		<navigator url="/pages/member/unicard/detail">
		<view class="unicard-photo">
			<view class="unicard-tag-type">套餐卡</view>
			<image mode="aspectFill" :src="'#FFFFFF'"></image>
			<view class="unicard-status flex center alcenter">
<!-- 				<text class="iconfont iconlabel_consumption ft80 text-w"></text>
 -->				<text class="iconfont iconlabel_expired ft80 text-w"></text>
			</view>
		</view>
		<view class="mt30 flex alcenter opacity5"><text class="ftw600 ft16 text-main">我要有培训联盟卡</text><view class="tag-unicard-cat ml20">美食通</view></view>
		<view class="mt30 flex alend space opacity5">
			<view>
				<view>
					<text class="ft14 text-notice">剩余项目：</text>
					<text class="ft14 ftw600 text-info">60个</text>
				</view>
				<view class="flex alcenter mt30">
					<text class="ft14 text-notice">有效期至：</text>
					<text class="ft14 ftw600 text-info">2019.12.31</text>
					<text class="unicard-tag-expire ft12 text-w ml20">还剩30天到期</text>
				</view>
			</view>
			<view class="iconfont iconbtn_card_ma1 ft32 text-main"></view>
			
		</view>
		</navigator>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	.unicard-status{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 3;
		background: rgba(0,0,0,.3);
		left: 0;
		top: 0;
	}
	.unicard-tag-expire{
		height: 36rpx;
		line-height: 36rpx;
		padding: 0rpx 10rpx;
		border-radius: 4rpx;
		background: #FF6D00;
	}
	.tag-unicard-cat{
		padding: 4rpx 12rpx;
		border:2rpx solid #CCCCCC;
		color:#999999;
		font-size: 24rpx;
		border-radius: 4rpx;
	}
	.unicard-photo{
		position: relative;
		width: 100%;
		height: 316rpx;
		overflow: hidden;
		border-radius: 16rpx;
	}
	.unicard-photo image{
		width: 100%;
		height: 316rpx;
	}
	.unicard-tag-type{
		padding: 4rpx 12rpx;
		background: rgba(0,0,0,.3);
		color:#FFFFFF;
		font-size: 24rpx;
		display: inline-flex;
		position: absolute;
		border-radius:0rpx 0rpx 8rpx 0rpx;
		z-index: 2;
	}
</style>